<template>
 <div>
   <div class="van-coupon-list__list van-coupon-list__list--with-bottom" style="height: 578px;">
     <div :class="{'van-coupon':true, 'van-coupon--disabled':disable}" v-for="(item,index) in list" :key="index">
       <div class="van-coupon__content">
         <div class="van-coupon__head">
           <h2 class="van-coupon__amount">
             {{ item.value }}
             <span>元</span>
           </h2>
           <p class="van-coupon__condition">{{ item.condition }}</p>
         </div>
         <div class="van-coupon__body">
           <p class="van-coupon__name">
             {{ item.name }}
           </p>
           <p class="van-coupon__valid">{{ item.startAt }} - {{ item.endAt }}</p>

         </div>
       </div>
       <p class="van-coupon__description">{{ item.description }}</p>
     </div>
   </div>
 </div>
</template>

<script>
export default {
  name: 'coupon',
  props: {
    list: Array,
    disable: Boolean,
    optional: Boolean
  }

}
</script>

<style scoped>

</style>
